import { useAPIUtils } from "@/components/APIUtilsProvider";
import PageLayout from "@/components/PageLayout";
import { Button, Divider, Flex, Select, Title } from "@mantine/core";
import { DateTimePicker } from "@mantine/dates";
import { useForm } from "@mantine/form";
import { IconFileChart } from "@tabler/icons-react";
import dayjs from "dayjs";
import StatusBadge from "../order/StatusBadge";
export default function ExcelPanel() {
  const { restDownload } = useAPIUtils();

  const convertValues = (formValues) => ({
    ...formValues,
    start: dayjs(formValues.start).format("YYYY-MM-DDTHH:mm:ss"),
    end: dayjs(formValues.end).format("YYYY-MM-DDTHH:mm:ss"),
  });

  const searchForm = useForm({
    mode: "uncontrolled",
    initialValues: {
      orderId: "",
      status: "",
      start: dayjs().subtract(30, "days").toDate(),
      end: new Date(),
      receiver: "",
    },
    validate: {},
  });

  return (
    <PageLayout title={"数据导出"}>
      <form>
        <Title order={6} mb={30}>
          订单相关
        </Title>
        <Flex
          mih={50}
          mb={44}
          gap="md"
          justify="flex-start"
          align="flex-end"
          direction="row"
          wrap="wrap"
        >
          <DateTimePicker
            description="时间开始"
            {...searchForm.getInputProps("start")}
            valueFormat="YYYY/MM/DD HH:mm"
            w={200}
          />
          <DateTimePicker
            description="时间结束"
            {...searchForm.getInputProps("end")}
            valueFormat="YYYY/MM/DD HH:mm"
            w={200}
          />

          <Select
            description="状态"
            {...searchForm.getInputProps("status")}
            placeholder="默认全部"
            clearable
            data={[
              { label: "等待买家付款", value: "CREATED" },
              { label: "等待经营店铺付款", value: "BUYER_PAID" },
              { label: "等待管理店铺付款", value: "FIRST_SELLER_PAID" },
              { label: "等待发货", value: "SECOND_SELLER_PAID" },
              { label: "运输中", value: "DELIVERING" },
              { label: "已完成", value: "RECEIVED" },
              { label: "已取消", value: "CANCELLED" },
            ]}
            renderOption={({ option }) => <StatusBadge status={option.value} />}
            w={200}
          />

          <Button
            rightSection={<IconFileChart size={14} />}
            onClick={() =>
              restDownload(
                "/api/admin/orders/base/export",
                convertValues(searchForm.values),
                "订单基础.xlsx"
              )
            }
          >
            导出订单基础
          </Button>
          <Button
            rightSection={<IconFileChart size={14} />}
            onClick={() =>
              restDownload(
                "/api/admin/orders/product/export",
                convertValues(searchForm.values),
                "商品明细.xlsx"
              )
            }
          >
            导出商品明细
          </Button>
        </Flex>
      </form>
      <Divider />
      <Title order={6} mb={30} mt={40}>
        会员相关
      </Title>
      <Flex
        mih={50}
        mb={44}
        gap="md"
        justify="flex-start"
        align="flex-end"
        direction="row"
        wrap="wrap"
      >
        <Button
          rightSection={<IconFileChart size={14} />}
          onClick={() =>
            restDownload("/api/admin/members/export", {}, "会员情况.xlsx")
          }
        >
          导出会员情况
        </Button>
      </Flex>
    </PageLayout>
  );
}
